import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Header from './components/Header';
import Footer from './components/Footer';
import TableBody from './components/TableBody';
import useGenKey from './hooks/useGenKey';
import useRowVisual from './hooks/useRowVisual';
import useProcColumns from './hooks/useProcColumns';
import useTableState from './hooks/useTableState/useTableState';
import getCssPrefix from './lib/getCssPrefix';
import TableContext from './lib/TableContext';
import './lib/font';
const { cssPrefix } = getCssPrefix();

/**
 * @param {*} props 
 * @returns 
 */
function GjdTable(props) {
    const { columns: originalColumns, sourceData, id, fullWidth = true } = props;
    const [mainWidth, setMainWidth] = useState(0);
    const { tableState, modifyState, scrollVisible: { y: scrollyVisible }, modifyScrollVisible, scrollUtility } = useTableState();
    const primaryKey = useGenKey(id);
    const { rowsVisual, modifyRowsVisual } = useRowVisual(primaryKey);
    const { columns, leftColumns, rightColumns, modifyColumns, modifyLeftColumns, modifyRightColumns } = useProcColumns(originalColumns, mainWidth);

    const contextValue = {
        key: primaryKey, rowsVisual, modifyRowsVisual, scrollyVisible, fullWidth, tableState, modifyState,
        scrollUtility,
    };

    return (
        <div className={`${cssPrefix}-table-container`}>
            <TableContext.Provider
                value={contextValue}
            >
                <Header
                    columns={columns}
                    leftColumns={leftColumns}
                    rightColumns={rightColumns}
                    modifyColumns={modifyColumns}
                    modifyLeftColumns={modifyLeftColumns}
                    modifyRightColumns={modifyRightColumns}
                    setMainWidth={setMainWidth}
                />
                <TableBody
                    sourceData={sourceData}
                    columns={columns}
                    leftColumns={leftColumns}
                    rightColumns={rightColumns}
                    modifyColumns={modifyColumns}
                    modifyLeftColumns={modifyLeftColumns}
                    modifyRightColumns={modifyRightColumns}
                    modifyRowsVisual={modifyRowsVisual}
                    setScrollVisible={modifyScrollVisible}
                />
                <Footer />
            </TableContext.Provider >
        </div>
    )
}
GjdTable.propTypes = {
    columns: PropTypes.array,
    sourcedata: PropTypes.array,
    fullWidth: PropTypes.bool,
}
export default GjdTable;